<template>

    <div>


        <el-card>
            <div slot="header" class="clearfix">
                <span style="font-size: 18px;font-weight: bold">基本信息</span>
            </div>

            <el-card>
                <div style="display: flex;">

                    <img src="../../assets/img/微信图片_20240114171521.jpg" alt="" width="450" height="450"
                         style="margin: 20px 90px">

                    <div>
                        <el-form :model="account" label-width="79px" :rules="rules" ref="accountRef">

                            <el-form-item label="ID">
                                <el-input v-model="account.id" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="账号">
                                <el-input v-model="account.username" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="昵称" prop="name">
                                <el-input v-model="account.name" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="account.phone" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="地址" prop="address">
                                <el-input v-model="account.address" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="电子邮箱" prop="email">
                                <el-input v-model="account.email" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="头像">
                                <div style="display: flex;align-items: center;flex-direction: row;margin: 0 20px">
                                    <el-avatar shape="square" :size="100" fit="fill" :src="avatarUrl"></el-avatar>
                                    <el-upload
                                            :show-file-list="false"
                                            :action="$baseUrl + '/file/upload'"
                                            :on-success="handleFileUpload"
                                            style="margin-left: 60px"
                                    >
                                        <el-button type="primary">选择头像</el-button>
                                    </el-upload>

                                </div>

                            </el-form-item>

                            <el-form-item prop="code" label="验证码">
                                <div style="display: flex;justify-content: center;align-items: center;">
                                    <el-input prefix-icon="el-icon-place" clearable v-model="account.code"
                                              placeholder="请输入验证码"></el-input>
                                    <div style="flex: 1;margin-left: 30px">
                                        <valid-code @update:value="getCode"
                                                    style="height: 36px;width: 80px;"></valid-code>
                                    </div>
                                </div>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" style="width: 80%" @click="handleEdit"> 修 改 信 息
                                </el-button>
                            </el-form-item>

                        </el-form>
                    </div>
                </div>
            </el-card>
        </el-card>
    </div>
</template>


<script>
import {defineComponent} from 'vue'
import ValidCode from "@/conponents/ValidCode.vue";
import crypto from "@/utils/encryp";

export default defineComponent({
    name: "PersonalCenter",
    components: {ValidCode},
    data() {

        // 自定义校验规则
        const validateCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else if (this.account.code.toLowerCase() !== this.code) {
                callback(new Error('验证码错误'))
            } else {
                callback()
            }
        };


        //手机号格式校验
        const validatorPhone = function (rule, value, callback) {
            if (value === '') {
                callback(new Error('手机号不能为空'))
            } else if (!/^1\d{10}$/.test(value)) {
                callback(new Error('手机号格式错误'))
            } else {
                callback()
            }
        };


        return {
            code: '',    // 验证码
            // 当前登录账号的信息
            avatarUrl: '',  // 暂存用户上传的头像
            account: {
                id: '',
                password: '',
                username: '',
                name: '',
                phone: '',
                code: '',
                email: '',
                avatar: '',
                role: ''
            },
            rules: {         // 校验规则
                name: [
                    {max: 15, message: '昵称超出最大字符', trigger: 'blur'}
                ],
                phone: [
                    {validator: validatorPhone, trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                code: [
                    {validator: validateCode, trigger: 'blur'}
                ]
            }

        }
    },
    mounted() {
        // 初始化操作
        // 获取登陆后的用户信息
        // 存储到account中
        this.account = JSON.parse(localStorage.getItem("account"));
        this.avatarUrl = this.account.avatar;
    },
    methods: {


        // 获取验证码
        getCode(code) {
            this.code = code.toLowerCase();
        },


        // 处理 头像上传按钮   的点击事件
        handleFileUpload(response, file, fileList) {
            // 判断上传的文件的类型
            // 只能上传图片类型，如果不是图片资源那么提示“只能上传图片！！”
            if (!file.raw.type.includes('image')) {
                this.$message.error('只能上传图片！')
                return
            }
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址

            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.avatarUrl = url;
        },


        // 根据用户id获取用户信息
        getUserInfo() {
            this.$request.get('/admin/getUserInfo/' + this.account.id).then(res => {
                if (res.code === '200') {
                    this.account = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 修改个人信息
        handleEdit() {
            // 更新表单中的数据
            this.account.avatar = this.avatarUrl
            this.account.code = ''
            // 将被更改的用户信息from_user 更新请求到后端
            this.$request.put('/admin/update', this.account).then(res => {
                //  判断是否更新成功
                if (res.code === '200') {
                    // 更新成功
                    // 更新localStorage中的用户信息
                    localStorage.setItem("account", JSON.stringify(this.account));
                    // 提示修改成功
                    this.$message.success('修改成功！')
                    // 刷新当前页面
                    // window.location.reload()
                } else {
                    // 提示报错信息
                    this.$message.error(res.msg)
                }
            })
        },

    }
})
</script>


<style>


</style>